<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品查询结果 - 电商平台</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
        }

        .header {
            background-color: #ff6700;
            color: white;
            padding: 15px 0;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .header h1 {
            margin: 0;
            padding: 0 20px;
            font-size: 24px;
        }

        .search-box {
            display: flex;
            margin: 20px 0;
            padding: 0 20px;
        }

        .search-box input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }

        .search-box button {
            padding: 10px 20px;
            background-color: #ff6700;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            font-size: 16px;
        }

        .filter-bar {
            background-color: white;
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .filter-item {
            margin-right: 20px;
            display: inline-block;
        }

        .filter-item select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .result-info {
            margin-bottom: 15px;
            color: #666;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        .product-card {
            background-color: white;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            height: 180px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #eee;
        }

        .product-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .product-info {
            padding: 15px;
        }

        .product-title {
            font-size: 14px;
            height: 40px;
            overflow: hidden;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .product-price {
            color: #ff6700;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .product-original-price {
            color: #999;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 5px;
        }

        .product-sales {
            color: #666;
            font-size: 12px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 30px 0;
        }

        .pagination a {
            color: #333;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid #ddd;
            margin: 0 4px;
            border-radius: 4px;
        }

        .pagination a.active {
            background-color: #ff6700;
            color: white;
            border-color: #ff6700;
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }

        .loading {
            text-align: center;
            padding: 20px;
            font-size: 18px;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>商品查询结果</h1>
        </div>

        <div class="search-box">
            <input type="text" id="search-input" placeholder="搜索商品..." value="智能手机">
            <button id="search-btn">搜索</button>
        </div>
        <div class="product-grid" id="product-grid">
            <div class="loading">加载中...</div>
        </div>
    </div>

    <script>
        // 商品数据 (通常应该从API获取)
        const productData = {
            "search_keyword": "智能手机",
            "total_results": 125,
            "products": [
                {
                    "id": 1,
                    "name": "华为Mate 40 Pro 5G智能手机 8GB+256GB 全网通 麒麟9000芯片",
                    "price": 5999,
                    "original_price": 6499,
                    "discount": 500,
                    "monthly_sales": 12000,
                    "image_url": "https://images.unsplash.com/photo-1611791484670-ce19b801d192?w=400&auto=format",
                    "category": "phone",
                    "brand": "huawei",
                    "rating": 4.8
                },
                {
                    "id": 2,
                    "name": "Apple iPhone 12 128GB 黑色 移动联通电信5G全网通手机",
                    "price": 6299,
                    "original_price": 6799,
                    "discount": 500,
                    "monthly_sales": 25000,
                    "image_url": "https://images.unsplash.com/photo-1603921326210-6edd2d60ca68?w=400&auto=format",
                    "category": "phone",
                    "brand": "apple",
                    "rating": 4.9
                },
                {
                    "id": 3,
                    "name": "小米11 Ultra 5G智能手机 12GB+256GB 骁龙888 2K AMOLED四曲面柔性屏",
                    "price": 5499,
                    "original_price": 5999,
                    "discount": 500,
                    "monthly_sales": 18000,
                    "image_url": "https://images.unsplash.com/photo-1631729371254-42c2892f0e6e?w=400&auto=format",
                    "category": "phone",
                    "brand": "xiaomi",
                    "rating": 4.7
                },
                {
                    "id": 4,
                    "name": "OPPO Find X3 Pro 5G智能手机 12GB+256GB 骁龙888 10亿色双主摄",
                    "price": 5499,
                    "original_price": null,
                    "discount": 0,
                    "monthly_sales": 8500,
                    "image_url": "https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?w=400&auto=format",
                    "category": "phone",
                    "brand": "oppo",
                    "rating": 4.6
                },
                {
                    "id": 5,
                    "name": "vivo X60 Pro+ 5G智能手机 12GB+256GB 骁龙888 微云台双主摄",
                    "price": 4998,
                    "original_price": 5498,
                    "discount": 500,
                    "monthly_sales": 7200,
                    "image_url": "https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?w=400&auto=format",
                    "category": "phone",
                    "brand": "vivo",
                    "rating": 4.5
                },
                {
                    "id": 6,
                    "name": "一加9 Pro 5G智能手机 12GB+256GB 骁龙888 哈苏手机影像系统",
                    "price": 5499,
                    "original_price": null,
                    "discount": 0,
                    "monthly_sales": 6800,
                    "image_url": "https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?w=400&auto=format",
                    "category": "phone",
                    "brand": "oneplus",
                    "rating": 4.7
                },
                {
                    "id": 7,
                    "name": "荣耀50 Pro 5G智能手机 8GB+256GB 1亿像素超清影像 100W超级快充",
                    "price": 3699,
                    "original_price": null,
                    "discount": 0,
                    "monthly_sales": 15000,
                    "image_url": "https://images.unsplash.com/photo-1603015269169-225cb700e29a?w=400&auto=format",
                    "category": "phone",
                    "brand": "honor",
                    "rating": 4.6
                },
                {
                    "id": 8,
                    "name": "realme 真我GT Neo 天玑1200 5G智能手机 12GB+256GB 65W智慧闪充",
                    "price": 2299,
                    "original_price": 2599,
                    "discount": 300,
                    "monthly_sales": 23000,
                    "image_url": "https://images.unsplash.com/photo-1598327105666-5b89351aff97?w=400&auto=format",
                    "category": "phone",
                    "brand": "realme",
                    "rating": 4.4
                }
            ],
        };

        const searchInput = document.getElementById('search-input');
        const searchBtn = document.getElementById('search-btn');

        const productGrid = document.getElementById('product-grid');

        // 当前状态 
        let currentProducts = [...productData.products];

        // 初始化页面
        window.onload = function () {         
            renderProducts(currentProducts);
        } 

        // 渲染产品列表
        function renderProducts(products) {

            productGrid.innerHTML = '';

            if (products.length === 0) {
                productGrid.innerHTML = '<div class="loading">没有找到符合条件的商品</div>';
                return;
            }

            products.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card';

                productCard.innerHTML = `
                    <div class="product-image">
                        <img src="${product.image_url}" alt="${product.name}">
                    </div>
                    <div class="product-info">
                        <div class="product-title">${product.name}</div>
                        <div class="product-price">
                            ¥${product.price}
                            ${product.original_price ? `<span class="product-original-price">¥${product.original_price}</span>` : ''}
                        </div>
                        <div class="product-sales">月销 ${formatSales(product.monthly_sales)}</div>
                    </div>
                `;

                productGrid.appendChild(productCard);
            });
        }



        // 格式化销量显示
        function formatSales(sales) {
            if (sales >= 10000) {
                return (sales / 10000).toFixed(1) + '万+';
            }
            return sales + '+';
        }
    </script>
</body>

</html>